<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span class="article-cover">产品封面</span>
      </div>
      <el-upload
        class="avatar-uploader"
        :action="uploadPicAction"
        :show-file-list="false"
        :headers="headers"
        :on-success="handleAvatarSuccess"
        :on-error="iconAvatarError"
        :before-upload="beforeAvatarUpload"
      >
        <img
          v-if="productDetail.imageUrl"
          :src="productDetail.imageUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>

      <div class="inputSort">
        <span style="font-size: 12px; margin-left: -50px; margin-right: 10px"
          >产品状态</span
        >
        <span class="select-sort">
          <el-select
            size="small"
            v-model="productDetail.status"
            placeholder="请选择"
          >
            <el-option
              v-for="(i,index) in options"
              :key="index"
              :label="i.label"
              :value="i.value"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div class="inputSort">
        <span style="font-size: 12px; margin-left: -50px; margin-right: 10px"
          >产品级别</span
        >
        <span class="select-sort">
          <el-select
            size="small"
            v-model="productDetail.productLevel"
            placeholder="请选择"
          >
            <el-option
              v-for="(k,index) in optionsLevel"
              :key="index"
              :label="k.label"
              :value="k.value"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div class="inputSort">
        <span style="font-size: 12px; margin-left: -50px; margin-right: 10px"
          >产品平台</span
        >
        <span class="select-sort">
          <el-select
            size="small"
            v-model="productDetail.platformCode"
            placeholder="请选择"
          >
            <el-option
              v-for="(c,index) in optionsCode"
              :key="index"
              :label="c.label"
              :value="c.value"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div class="inputSort">
        <span style="font-size: 12px; margin-left: -50px; margin-right: 10px"
          >产品属性</span
        >
        <span class="select-sort">
          <el-select
            multiple
            size="small"
            v-model="productDetail.attributeIds"
            placeholder="请选择"
          >
            <el-option
              v-for="(a,index) in optionsAttribute"
              :key="index"
              :label="a.attributeName"
              :value="a.attributeId"
            ></el-option>
          </el-select>
        </span>
      </div>
    </el-card>
  </div>
</template>
<script>
import environment from "@/environment/index.js";
import securityService from "@/services/authentication/securityService";
import * as productManageApi from "@/api/request/productManageApi";
export default {
  props: ["productDetail"],
  components: {},
  provide: {},
  data() {
    return {
      optionsAttribute: [],
      uploadPicAction: `${environment.uploadPicUrl}`,

      headers: {
        appId: "",
        Authorization: "",
      },
      options: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 0,
          label: "下架",
        },
      ],
      optionsLevel: [
        {
          value: 1,
          label: "青铜会员",
        },
        {
          value: 2,
          label: "白银会员",
        },
        {
          value: 3,
          label: "黄金会员",
        },
        {
          value: 4,
          label: "至尊999",
        },
      ],

      optionsCode: [
        {
          value: "ali",
          label: "阿里云",
        },
        {
          value: "huawei",
          label: "华为云",
        },
        {
          value: "jd",
          label: "京东云",
        },
        {
          value: "baidu",
          label: "百度云",
        },
        {
          value: "jinshan",
          label: "金山云",
        },
        {
          value: "tencent",
          label: "腾讯云",
        },
      ],
    };
  },
  computed: {},
  watch: {
    productDetail: {
      //监听的对象
      deep: true, //深度监听设置为 true
      handler: function (newV) {
        this.getProductAttributeList();
      },
    },
  },
  mounted() {
     this.getProductAttributeList();
  },
  methods: {
    // 属性列表请求
    async getProductAttributeList() {
      let params = {
        pageIndex: 1,
        pageSize: 10,
      };
      let { data } = await productManageApi.getProductAttributeList(params);
      this.optionsAttribute = data.items
      console.log(this.optionsAttribute)
    },
    async beforeAvatarUpload(file) {
      let data = await securityService.getUser();
      if (data && data.access_token) {
        this.headers.Authorization = "Bearer " + data.access_token;
      }

      this.headers.appId = this.$store.state.dashboard.appId;
      const isPic =
        ["image/png", "image/jpeg", "image/gif", "image/bmp"].indexOf(
          file.type
        ) !== -1;
      // const isPic = file.type === "image/jpeg";
      const maxMb = 10;
      const isSizeOk = file.size / 1024 / 1024 < maxMb;
      if (!isPic) {
        this.authtipShow = true;
        this.authtipText = "格式错误";
        return false;
      }
      if (!isSizeOk) {
        this.authtipShow = true;
        this.authtipText = `请上传小于${maxMb}M的图片!`;
        return false;
      }
      this.authtipShow = false;
      return isPic && isSizeOk;
    },
    //上传图片失败回调
    iconAvatarError() {
      this.$notify({
        customClass: "notify-error",
        message: `上传失败`,
        duration: 1500,
        showClose: false,
      });
    },
    // 上传限制
    handleAvatarSuccess(res, file) {
      console.log(file.raw.type, file);

      if (
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/jpg"
      ) {
        this.productDetail.imageUrl = file.response;
      }
      // this.disabled = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.inputSort {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-card /deep/ .el-card__body {
  text-align: center;
  padding: 15px;
}
.el-collapse /deep/ .el-collapse-item__header {
  padding: 0 10px;
}
.el-collapse /deep/ .el-collapse-item__content {
  padding: 0 10px;
}
/* 产品封面 */
.avatar-uploader /deep/ .el-upload-list--picture-card {
  display: inline-block;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed $--color-primary;
  border-radius: 0;

  vertical-align: middle;
}
.avatar-uploader .el-upload > .avatar-uploader-icon {
  font-size: 22px;
}
.avatar-uploader .el-upload i {
  color: $--color-primary;
  cursor: pointer;
  // padding-bottom: 5px;
}
.avatar-uploader /deep/ .el-upload--picture-card {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: top;
  display: flex;
  align-items: center;
  /* text-align: center; */
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}
.avatar-uploader /deep/ .el-upload-list > li {
  float: left;
  border-radius: 0;
  cursor: move;
}
.avatar-uploader /deep/ .el-upload-list > li:first-child {
  width: 200px;
  height: 200px;
}
.avatar-uploader /deep/ .el-upload-list > li:not(:first-child) {
  width: 96px;
  height: 97px;
}
.avatar-uploader /deep/ .el-upload-list > li:not(:first-child) img {
  object-fit: contain;
}

.avatar-uploader /deep/ .el-upload-list__item-actions > span {
  position: absolute;
  right: 17px;
  bottom: 19px;
  top: auto;
  width: 27px;
  border: $--border-base;
  height: 27px;
  border-radius: 50%;
}

.avatar-uploader
  /deep/
  .el-upload-list__item-actions
  .el-upload-list__item-preview {
  left: 17px;
  bottom: 20px;
  border: none;
  width: 27px;
  height: 27px;
  /* background: url("~img/pic-icon/look.png") no-repeat center; */
  background-size: contain;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover {
  cursor: move;
}
.avatar-uploader
  /deep/
  .el-upload-list__item-actions
  .el-upload-list__item-delete {
  right: 17px;
  bottom: 20px;
  border: none;
  width: 27px;
  height: 27px;
  /* background: url("~img/pic-icon/delete-icon.png") no-repeat center; */
  background-size: contain;
}

.avatar-uploader /deep/ .el-upload-list__item-actions .el-icon-zoom-in,
.avatar-uploader /deep/ .el-upload-list__item-actions .el-icon-delete {
  display: none;
}
</style>
<style lang="scss" scoped>
.article-cover {
  color: #262626;
  font-weight: 500;
  font-size: $--font-size-small;
}
.modal-footer {
  height: 60px;
  position: absolute;
  bottom: -11px;
  right: 16px;
  width: 100%;
  z-index: 100;
  text-align: right;
  padding-top: 0;
}
.icon-hover {
  color: $--color-white;
}
</style>
